<template>
  <div class="adcolumn-item">
    <div class="adcolumn-item_li" :style="'width:calc('+100/6+'% - 10px);'+'background:'+item.bgColor+';'" v-show="$api.role(item.link.url)" v-for="(item,index) in widget" :key="index">
      <div class="item_li-box">
        <div class="item_li-left">
          <div class="adcolumn-item_title">{{item.link.name}}</div>
          <div class="adcolumn-item_intro">{{item.prompt}}</div>
        </div>
        <div class="item_li-right">
          <i class="icon iconfont " :class="`${item.icon.name}`" :style="`font-size: 32px;`"></i>
        </div>
      </div>
      <div class="adcolumn-item_buttom">
        <div class="left-but">
          <div class="left-but_promptly" :style="`color: ${item.bgColor};`" @click="$router.push(item.link.url)">立即进入</div>
        </div>
        <div class="right-icon">
          <x-icon :src="item.icon.name" :size="36" :color="item.icon.iconSecondColor"></x-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    props: {
      widget: {}
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "./styles.scss";
</style>
